<template>
  <div class="cai-kai">
    <div class="c-nav-top key769">
      <div class="nav-d">
        <span class="iconfont icon">&#xe86b;</span>
        <span class="nav-d2">菜单</span>
      </div>
      <div class="nav-d">
        <p class="nav-d-p"></p>
      </div>
      <div class="nav-d nav-d3">
        <img src="../assets/img/p1001.png" alt />
      </div>
      <div class="nav-d">
        <span class="nav-d4">小菜快开</span>
      </div>
      <div class="nav-right">
        <div class="nav-d" style="margin-right:20px">
          <span>备案</span>
        </div>
        <div class="nav-d">
          <span>控制台</span>
        </div>
        <div class="nav-d" style="margin-right:20px">
          <p class="nav-d-p"></p>
        </div>
        <div class="nav-d">
          <span>登录</span>
        </div>
        <div class="nav-d nav-d5">
          <p>免费注册</p>
        </div>
      </div>
    </div>
    <div class="c-nav-top key768 c-nav-top2">
      <div class="nav-d nav-d3">
        <img src="../assets/img/p1001.png" alt="10" />
      </div>
      <div class="nav-d">
        <span class="nav-d4">小菜快开</span>
      </div>
      <div class="nav-right">
        <div class="nav-d">
          <span class="iconfont icon">&#xe63d;</span>
        </div>
        <div class="nav-d">
          <span class="iconfont icon">&#xe658;</span>
        </div>
        <!-- <div class="nav-d">
          <span class="iconfont icon">&#xe663;</span>
        </div>-->
      </div>
    </div>
    <div class="content-center">
      <div class="nav-menu">
        <div class="caikai-menu">
          <el-scrollbar
            ref="scrollb"
            class="as-body"
            style="height:calc(100% - 40px);"
            :native="false"
          >
            <div class="menu-top">
              <div>
                <span
                  class="iconfont icon3"
                  @mouseover="mouseOver"
                  @mouseleave="mouseLeave(1500)"
                >&#xe86b;</span>
                <span class="menu-top-t">短信</span>
              </div>
              <div>
                <span
                  @click="updateOpen"
                  class="iconfont iconfont2"
                  v-html="open?'&#xe634;':'&#xe633;'"
                ></span>
              </div>
            </div>
            <Menu :active-name="$route.params.id" ref="menu" :open-names="openNames">
              <template v-for="item of menuList">
                <template v-if="item.child">
                  <Submenu :name="item.id" :key="item.id">
                    <template slot="title">{{item.title}}</template>
                    <template v-for="item2 of item.child">
                      <template v-if="item2.child">
                        <Submenu :name="item2.id" :key="item2.id">
                          <template slot="title">{{item2.title}}</template>
                          <MenuItem
                            v-for="item3 of item2.child"
                            :key="item3.id"
                            :name="item3.id"
                            :to="'/index/'+item3.id"
                          >{{item3.title}}</MenuItem>
                        </Submenu>
                      </template>
                      <template v-else>
                        <MenuItem
                          :name="item2.id"
                          :key="item2.id"
                          :to="'/index/'+item2.id"
                        >{{item2.title}}</MenuItem>
                      </template>
                    </template>
                  </Submenu>
                </template>
                <template v-else>
                  <MenuItem :name="item.id" :key="item.id" :to="'/index/'+item.id">{{item.title}}</MenuItem>
                </template>
              </template>
            </Menu>
          </el-scrollbar>
        </div>
      </div>
      <div class="nav-doc">
        <div class="caikai-search">
          <div class="search-v">
            <div class="search-i search-cai" @click="opneMenu">
              <span class="iconfont">&#xe677;</span>
            </div>
            <div class="search-i">
              <img src="../assets/img/p1003.png" alt="10" />
            </div>
            <el-autocomplete
              style="width:calc(100% - 300px);max-width:680px;"
              v-model="state2"
              size="medium"
              :fetch-suggestions="querySearch"
              placeholder="搜索本产品内容"
              :trigger-on-focus="false"
            ></el-autocomplete>
            <div class="search-i search-i2">
              <span>文档中心</span>
              <span>API 中心</span>
              <span>SDK 中心</span>
            </div>
          </div>
        </div>
        <div
          class="side-nav-down-box"
          v-if="navShow"
          @mouseover="mouseOver"
          @mouseleave="mouseLeave(500)"
        >
          <div class="down-box-header">
            <div class="c-search-input">
              <input
                type="text"
                id="inputId"
                class="J-doc-popnav-search-input"
                v-model="searchvalue"
                v-on:input="handInc"
              />
              <span class="iconfont">&#xe7b3;</span>
              <div class="J-doc-popnav-search-list" v-if="seachShow">
                <h3 class="p-all-search-tit">没有结果文本</h3>
              </div>
            </div>
            <p class="box-a">云服务器</p>
            <p class="box-a">网站备案</p>
            <p class="box-a">即时通信 IM</p>
            <p class="box-a">对象存储</p>
          </div>
          <div>
            <navGrids></navGrids>
          </div>
        </div>
        <div>
          <router-view />
        </div>
      </div>
    </div>
    <div class="right-box">
      <div class="right-box-all">限时秒杀</div>
      <div class="right-box-wit"><span class='iconfont'>&#xe62e;</span></div>
    </div>
    <div class="caikai-footer">
      <div class="fo-right">
        <p class="fo-y">Copyright © 2013-2020 Tencent Cloud. All Rights Reserved. 小菜快开 版权所有</p>
      </div>
    </div>
    <!-- 菜单遮罩 -->
    <div class="menuRnoMask" v-if="menuRnoMask">
      <div class="rno-mask"></div>
      <div class="layer-out">
        <div class="rno-menu-mobile-head">
          <span class="iconfont" @click="closeMenu">&#xe632;</span>
        </div>
        <div class="rno-menu-mobile-nav" @click="closeMenu">
          <span class="iconfont">&#xe659;</span>
          <span class="rno-menu-mobile-text">文档首页</span>
        </div>
        <div class="menu-zhe">
          <el-scrollbar
            ref="scrollb"
            class="as-body"
            style="height:calc(100vh - 90px);"
            :native="false"
          >
            <Menu
              style="width:96%;padding:0 1% 0 3%;"
              :active-name="$route.params.id"
              ref="menu"
              :open-names="openNames"
            >
              <template v-for="item of menuList">
                <template v-if="item.child">
                  <Submenu :name="item.id" :key="item.id">
                    <template slot="title">{{item.title}}</template>
                    <template v-for="item2 of item.child">
                      <template v-if="item2.child">
                        <Submenu :name="item2.id" :key="item2.id">
                          <template slot="title">{{item2.title}}</template>
                          <MenuItem
                            v-for="item3 of item2.child"
                            :key="item3.id"
                            :name="item3.id"
                            :to="'/index/'+item3.id"
                          >{{item3.title}}</MenuItem>
                        </Submenu>
                      </template>
                      <template v-else>
                        <MenuItem
                          :name="item2.id"
                          :key="item2.id"
                          :to="'/index/'+item2.id"
                        >{{item2.title}}</MenuItem>
                      </template>
                    </template>
                  </Submenu>
                </template>
                <template v-else>
                  <MenuItem :name="item.id" :key="item.id" :to="'/index/'+item.id">{{item.title}}</MenuItem>
                </template>
              </template>
            </Menu>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var navcontro = 0;
import navGrids from "./nav";
export default {
  components: {
    navGrids,
  },
  data() {
    return {
      restaurants: [
        { value: "三全鲜食", address: "长宁区新渔路144号" },
        { value: "三只松鼠", address: "长宁区新渔路144号" },
      ],
      state2: "",
      open: true,
      menuRnoMask: false,
      openNames: [],
      menuList: [
        {
          title: "产品简介",
          id: "1001",
          child: [
            { title: "产品概述", id: "100101" },
            { title: "常用概念", id: "100102" },
          ],
        },
        {
          title: "审核标准",
          id: "1002",
          child: [
            { title: "使用须知", id: "100201" },
            { title: "签名审核标准", id: "100202" },
            {
              title: "正文模板审核标准",
              id: "100203",
            },
            { title: "正文模板示例", id: "100204" },
          ],
        },
        {
          title: "购买指南",
          id: "1003",
          child: [
            { title: "计费概述", id: "100301" },
            { title: "价格说明", id: "100302" },
          ],
        },
        {
          title: "图说短信",
          id: "1004",
          child: [{ title: "使用公司名发送短信（企业用户篇）", id: "100401" }],
        },
        {
          title: "国内短信",
          id: "1005",
          child: [
            {
              title: "国内短信简介",
              id: "100501",
              child: [
                { title: "国内短信概述", id: "10050101" },
                { title: "国内短信功能介绍", id: "10050102" },
                { title: "国内短信应用场景", id: "10050103" },
              ],
            },
            {
              title: "国内短信购买指南",
              id: "100502",
              child: [
                { title: "国内短信计费概述", id: "10050201" },
                { title: "国内短信价格总览", id: "10050202" },
                { title: "国内短信购买指引", id: "10050203" },
                { title: "国内短信套餐包续费说明", id: "10050204" },
                { title: "国内短信套餐包退费说明", id: "10050205" },
                { title: "国内短信欠费说明", id: "10050206" },
              ],
            },
            { title: "国内短信快速入门", id: "100503" },
          ],
        },
        { title: "国际/港澳台短信", id: "1006" },
        { title: "控制台指南", id: "1007" },
        { title: "最佳实践", id: "1008" },
        { title: "API文档", id: "1009" },
        { title: "SDK文档", id: "1010" },
        { title: "常见问题", id: "1011" },
        { title: "服务协议", id: "1012" },
        { title: "公告", id: "1013" },
        { title: "联系我们", id: "1014" },
        { title: "词汇表", id: "1015" },
      ],
      navShow: false,
      seachShow: false,
      searchvalue: "",
    };
  },
  mounted() {
    // 首次进入展开选中项菜单 给openNames添加内容，如果没找到this.open=false
    this.firstOpen();
    var that = this;
    document.addEventListener("click", function (e) {
      if (e.target.className != "J-doc-popnav-search-list") {
        that.seachShow = false;
      }
    });
  },

  methods: {
    updateOpen() {
      this.open = !this.open;
      if (this.openNames.length) {
        this.openNames = [];
      } else {
        let list = [];
        for (let i of this.menuList) {
          if (i.child && i.child.length > 0) {
            list.push(i.id);
          }
        }
        this.openNames = list;
      }
      this.$nextTick(() => {
        this.$refs.menu.updateOpened();
      });
    },
    firstOpen() {
      let id = this.$route.params.id;
      for (let i of this.menuList) {
        if (i.id == id) {
          break;
        } else if (i.child) {
          for (let j of i.child) {
            if (j.id == id) {
              this.openNames = [i.id];
              break;
            } else if (j.child) {
              for (let k of j.child) {
                if (k.id == id) {
                  this.openNames = [i.id, j.id];
                  break;
                }
              }
            }
          }
        }
      }
      if (this.openNames.length) {
        this.$nextTick(() => {
          this.$refs.menu.updateOpened();
        });
      } else {
        this.open = false;
      }
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    opneMenu() {
      this.menuRnoMask = true;
      document.querySelector(".nav-doc").style.display = "none";
    },
    closeMenu() {
      this.menuRnoMask = false;
      document.querySelector(".nav-doc").style.display = "block";
    },
    handInc() {
      this.seachShow = true;
    },
    mouseOver() {
      if (!navcontro) {
        navcontro = 1;
        this.navShow = true;
        setTimeout(() => {
          if (document.getElementById("inputId")) {
            document.getElementById("inputId").focus();
          }
        }, 50);
      }
    },
    mouseLeave(t) {
      navcontro = 0;
      setTimeout(() => {
        if (!navcontro) {
          this.navShow = false;
        }
      }, t);
    },
  },
  watch: {
    $route(to, from) {
      this.$nextTick(this.$refs.scrollb.update);
      this.closeMenu();
    },
  },
};
</script>

<style lang='scss' scoped>
@import "./index.scss";
</style>